@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-Thin.ttf');
    font-weight: 100;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-Light.ttf');
    font-weight: 200;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-ExtraLight.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'IBMPlexSans';
    src: url('resources/fonts/IBMPlexSans-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('resources/fonts/NunitoSans-Regular.ttf');
}

@font-face {
    font-family: 'Nunito Sans Italic';
    src: url('resources/fonts/NunitoSans-Italic.ttf');
}

@font-face {
    font-family: 'Nunito Sans Bold';
    src: url('resources/fonts/NunitoSans-Bold.ttf');
}

@font-face {
    font-family: 'Nunito Sans Black';
    src: url('resources/fonts/NunitoSans-Black.ttf');
}

@font-face {
    font-family: 'Nunito Sans ExtraBold';
    src: url('resources/fonts/NunitoSans-ExtraBold.ttf');
}

@font-face {
    font-family: 'Nunito Sans SemiBold';
    src: url('resources/fonts/NunitoSans-SemiBold.ttf');
}

@font-face {
    font-family: 'Nunito Bold';
    src: url('resources/fonts/Nunito-Bold.ttf');
}

@font-face {
    font-family: 'Nunito ExtraBold';
    src: url('resources/fonts/Nunito-ExtraBold.ttf');
}

.wm-app,
.wm-app .app-liveform .app-label {
    font-family: 'IBMPlexSans' !important;
}

.list-geser {
    overflow-x: scroll;
    white-space: nowrap;
    padding-left: 0;
    margin-bottom: 0;
}

.btnOK {
    background: #0048BA;
    border-radius: 4px;
    color: #FFFFFF;
}

.btnEdit {
    background: #007AFF;
    border-radius: 4px;
}

.btnDelete {
    background: #EB5757;
    border-radius: 4px;
}

.btnCancel {
    background: #007AFF;
    border-radius: 6px;
    color: #FFFFFF;
}

a {
    text-decoration: none !important;
}

.containerHeader {
    background: #2D3237;
    border-radius: 2px;
    padding: 1em;
    margin-right: 1em;
}

.txtHeader {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    color: #88939C;
}

.app-livelist:not(.On-Demand):not(.Scroll).None .loading-data-msg {
    display: flex;
    align-items: center;
}

.app-livelist:not(.On-Demand):not(.Scroll) .loading-data-msg>span {
    position: static;
}

.wm-app .global-spinner {
    display: none;
}

.wm-app .app-content-column {
    padding: 0;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.flex-align-baseline {
    display: flex;
    align-items: baseline;
}

.wm-app .checkbox input:checked+.caption:before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.wm-app .checkbox input:checked + .caption:before {
  -moz-box-shadow: inset 0 0 0 13px #0048BA !important;
  -webkit-box-shadow: inset 0 0 0 13px #0048BA !important;
  box-shadow: inset 0 0 0 13px #0048BA !important;
}


/* Letter spacing shortcut */

.ls-25 {
    letter-spacing: 0.25px;
}

.ls-40 {
    letter-spacing: 0.4px;
}

.ls-50 {
    letter-spacing: 0.5px;
}

.ls-55 {
    letter-spacing: 0.55px;
}

.ls-100 {
    letter-spacing: 1px;
}


/* Style for Profile page and other similar pages */

.profile-template-parent {
    padding: calc(54px - 1em) calc(32px - 1.5em);
    display: flex;
    justify-content: center;
}

.profile-template-left {
    display: inline-block;
    max-width: 252px;
    width: 23%;
    vertical-align: top;
}

.profile-template-right {
    display: inline-block;
    margin-left: 25px;
    max-width: 946px;
    width: calc(72% - 25px);
    vertical-align: top;
}


/* CMS Theme */

.wm-app aside[content="leftNavAdmin"] {
    background-color: #30363C;
}

.wm-app .cms-content.app-page-content {
    background-color: #f5f5f5;
    padding: 32px 20px;
}

.wm-app .cms-content .app-button {
    border-radius: 8px;
    box-shadow: none;
    font-family: IBMPlexSans;
    font-size: 14px;
    padding: 12px 23px;
    text-transform: none;
}

.wm-app .cms-content .app-button:not(.icon-button)>.app-icon,
.wm-app .cms-content .app-button:not(.icon-button)>i {
    font-size: 21px;
    padding-right: 10px;
}

.wm-app .cms-content .app-button .btn-caption {
    margin: 0;
}

.wm-app .cms-content .app-date:not(.bs-datepicker) {
    background: #2D3237;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 0 24px;
    align-items: center;
    padding-right: 12px;
}

.wm-app .cms-content .app-date:not(.bs-datepicker) .input-group-btn {
    width: auto;
}

.wm-app .cms-content .app-date:not(.bs-datepicker) .input-group-btn .btn {
    background-color: transparent;
    border-radius: 0;
    color: #DADADA;
    outline: 0 !important;
    padding: 0;
}

.wm-app .cms-content.app-dialog .modal-content {
    background-color: transparent;
    border: 0;
}

.wm-app .cms-content.app-dialog .app-dialog-header {
    background: #292D32;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 9px 24px;
}

.wm-app .cms-content.app-dialog .app-dialog-header .app-dialog-title {
    color: #FFFFFF;
    font-family: IBMPlexSans;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}

.wm-app .cms-content.app-dialog .app-dialog-header .app-dialog-close {
    color: white;
    opacity: 1;
    text-shadow: none;
}

.wm-app .cms-content.app-dialog .app-dialog-body {
    background: #30363C;
}

/* .wm-app .cms-content.app-dialog .app-dialog-footer {
    border: 0;
    padding: 0;
}

.wm-app .cms-content.app-dialog .app-dialog-footer .app-button {
    background: #2D3237;
    border: 0;
    border-radius: 0px 0px 2px 2px;
    color: #FFFFFF;
    width: 100%;
} */

.wm-app .cms-content .app-fileupload {
    margin: 0;
}

.wm-app .cms-content .app-fileupload .app-files-upload-status {
    padding-top: 0;
}

.wm-app .cms-content .app-fileupload .list-group.file-upload {
    display: none;
}

.wm-app .cms-content div[wmfileupload] {
    display: inline-block;
}

/* .wm-app .cms-content .app-grid .app-datanavigator .pagination li a,
.wm-app .cms-content .app-livelist .app-datanavigator .pagination li a {
    background-color: #30363C;
    box-shadow: none;
    color: white !important;
} */

.wm-app .cms-content .app-grid .app-datanavigator .pagination .active a,
.wm-app .cms-content .app-livelist .app-datanavigator .pagination .active a {
    background-color: white !important;
    color: #30363C !important;
}

.wm-app .breadcrumb .active a {
    color: #a4a4a4 !important;
}

.wm-app .cms-content .app-grid .app-datanavigator .pagination .disabled a,
.wm-app .cms-content .app-livelist .app-datanavigator .pagination .disabled a {
    background-color: transparent;
    color: #3c3c3c !important;
}

.wm-app .cms-content .app-grid,
.wm-app .cms-content .app-grid .loading-data-msg,
.wm-app .cms-content .app-grid .panel-footer,
.wm-app .cms-content .app-livelist .loading-data-msg,
.wm-app .cms-content .app-livelist .panel-footer {
    background-color: transparent;
}

.wm-app .cms-content .app-panel {
    border: 0;
}

.wm-app .cms-content .app-panel .panel-heading {
    background: #292D32;
    padding: 24px;
}

.wm-app .cms-content .app-panel .panel-heading .heading {
    color: #FFFFFF;
    font-family: IBMPlexSans;
    font-size: 14px;
}

.wm-app .cms-content .app-panel .panel-heading .description {
    margin-top: 0;
}

.wm-app .cms-content .app-panel .panel-content {
    background: #30363C;
}

.wm-app .cms-content .app-panel .panel-content .panel-body {
    padding: 24px;
}

.wm-app .cms-content .app-select {
    background: #2D3237;
    border: 0;
    border-radius: 4px;
    color: #FFFFFF;
    height: auto;
    padding: 12px;
}

.wm-app .cms-content .app-search {
    background: #2D3237;
    border-radius: 2px;
}

.wm-app .cms-content .app-search .input-group-addon {
    color: #DADADA;
    font-size: 14px;
}

.wm-app .cms-content .app-search .app-search-input {
    background: transparent;
    border: 0;
    color: #FFFFFF;
    font-family: IBMPlexSans;
    font-size: 14px;
    height: auto;
    padding: 12px;
}

.wm-app .cms-content .app-textarea,
.wm-app .cms-content .app-textbox:not(.app-search-input) {
    background: #2D3237;
    border: 0;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: IBMPlexSans;
    font-size: 14px;
    height: auto;
    padding: 12px;
}

.wm-app .cms-content .bs-datepicker {
    background: #2D3237;
    border: 0;
    border-radius: 4px;
    padding: 10px 4px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-head,
.wm-app .cms-content .bs-datepicker .bs-datepicker-body,
.wm-app .cms-content .bs-datepicker .bs-datepicker-body table,
.wm-app .cms-content .bs-datepicker .bs-datepicker-body thead tr,
.wm-app .cms-content .bs-datepicker .bs-datepicker-body tbody tr,
.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons,
.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-today-wrapper {
    background-color: transparent;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-head .previous,
.wm-app .cms-content .bs-datepicker .bs-datepicker-head .next {
    color: #007AFF;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-head .current {
    font-size: 16px;
    letter-spacing: 0.44px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body thead tr th {
    color: #9C9C9C;
    font-size: 12px;
    letter-spacing: 1px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body tbody tr {
    padding: 4px 0;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body tbody tr td {
    color: #FFFFFF;
    font-size: 14px;
    letter-spacing: 0.25px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body table.days span {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body table.days span:not(.is-other-month):hover {
    background: #FFFFFF;
    color: #0048BA;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body table.days span.is-other-month {
    color: #88939C;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body table.days span.current-date {
    color: #0048BA;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-body table.days span.selected {
    background: #0048BA;
    color: #FFFFFF;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons {
    justify-content: center;
    padding: 32px 0 14px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-today-wrapper {
    display: contents;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-today-wrapper .btn,
.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-clear-wrapper .btn {
    border: 0 !important;
    border-radius: 4px;
    box-shadow: none;
    font-family: IBMPlexSans;
    font-size: 14px;
    padding: 8px 16px;
    text-transform: none;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-today-wrapper .btn {
    background: #007AFF;
    color: #FFFFFF;
    margin-right: 16px;
}

.wm-app .cms-content .bs-datepicker .bs-datepicker-buttons .btn-clear-wrapper .btn {
    background: #5E6870;
    color: #0048BA;
}

.wm-app .cms-content .modul-title {
    background: #2D3237;
    border-radius: 2px;
    color: #FFFFFF;
    font-family: IBMPlexSans;
    font-size: 14px;
    padding: 12px 24px !important;
    width: 100%;
}

.wm-app .cms-content .form-control-feedback {
    color: #FFFFFF;
}

.wm-app .cms-content .form-control option {
    background: #2D3237;
}


/* Time picker */

.wm-app .dtp>.dtp-content>.dtp-date-view>header.dtp-header {
    background-color: rgb(212, 112, 11);
}

.wm-app .dtp .dtp-time {
    background-color: rgb(247, 148, 30);
}

.wm-app .dtp .dtp-picker,
.wm-app .dtp .dtp-buttons {
    background-color: #30363C;
}

.wm-app .dtp-buttons .btn {
    color: #FFFFFF;
}

@media only screen and (max-width: 991px) {
    .profile-template-parent {
        display: block;
        padding: calc(24px - 1em) calc(24px - 1.5em);
    }
    .profile-template-left,
    .profile-template-right {
        width: 100%;
        max-width: none;
    }
    .profile-template-right {
        margin-left: 0;
        margin-top: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .profile-template-parent {
        display: block;
        padding: 16px;
    }
}

@media only screen and (min-width: 768px) {
    .wm-app .app-header[content="headerAdmin"]+.app-content {
        height: calc(100% - 67.35px);
    }
}

.note-modal.open {
    z-index: 1052;
}


/*CMS Search styling*/


/*ul.app-search.dropdown-menu.ng-star-inserted {*/


/*    border-color: #30363C;*/


/*}*/


/*ul.app-search.dropdown-menu.ng-star-inserted {*/


/*    border-color: #30363C;*/


/*    background: #353C42;*/


/*}*/


/*ul.app-search a.ng-star-inserted {*/


/*    padding-top: 19px !important;*/


/*    color: #fff !important;*/


/*}*/


/*typeahead-container ul.app-search .active a.ng-star-inserted {*/


/*    background: #0048BA !important;*/


/*}*/


/*hide rich text link checkbox*/

.note-modal.link-dialog.open .checkbox.sn-checkbox-open-in-new-window {
    display: none;
}


/*commom*/

.color-red {
    color: red;
}


/* fix date picker cms*/

.app-date.input-group[name="dateTo"],
.app-date.input-group[name="dateFrom"] {
    max-width: none;
}


/* fix forum rich text*/

@media only screen and (max-device-width: 768px) {
    .note-popover .note-popover-arrow {
        left: 50px!important;
    }
    .note-popover.bottom.note-image-popover {
        left: 0px !important;
        width: 100% !important;
    }
}

.app-search.dropdown-menu {
    max-height: 450px;
}

.wm-app .btn {
    text-transform: inherit;
    font-size: 16px;
}

.wm-app .pointer {
    cursor: pointer;
}

.wm-app {
    text-transform: inherit;
}


/*new btn*/

.wm-app .btn-secondary-new {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 13px 16px;
    border-radius: 8px;
    border: solid 1px #dedede;
    background-color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #3c3c3c;
}

.wm-app .btn-default-new {
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 16px;
    border-radius: 8px;
    background-color: #0048BA;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

/* btn */

.wm-app .btn-filter-open {
    background-color: #0048BA !important;
    color: #ffffff !important;
}

.wm-app .btn:hover,
.wm-app .btn:focus{
    opacity: 0.8;
}


.wm-app .btn-reset-new:hover,
.wm-app .btn-reset-new:focus {
color: #ea2b1f !important;
}


.wm-app .btn-default-new:hover,
.wm-app .btn-default-new:focus,
.wm-app .btnOK:hover,
.wm-app .btnOK:focus,
.wm-app .btn-default-form-new:hover,
.wm-app .btn-default-form-new:focus,
.wm-app .btn-apply-new:hover,
.wm-app .btn-apply-new:focus,
.wm-app .form-submit-button:hover,
.wm-app .form-submit-button:focus,
.wm-app .add-category-button:hover,
.wm-app .add-category-button:focus,
.wm-app .btn-kirim-tugas:hover,
.wm-app .btn-kirim-tugas:focus,
.wm-app .btn-filter-open:hover,
.wm-app .btn-filter-open:focus{ 

    color: #fff !important;
} 

/* end btn */

/*toast*/

.toast-container {
    border-radius: 8px;
}

#toast-container>div {
    margin: 0;
}

.second-line-toast {
    display: flex;
}


/*table new row strip*/

.wm-app .table-new tr:nth-child(even) {
    background-color: #fafafa;
}

.wm-app .table-new td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.wm-app .table-new td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


/**/

@media only screen and (min-width: 481px) and (max-width: 767px) {
    .wm-app .app-header+.app-content,
    .wm-app .app-header+.app-top-nav {
        margin-top: 56pt;
    }
}

@media only screen and (min-width: 299px) and (max-width: 480px) {
    .wm-app .app-header+.app-content,
    .wm-app .app-header+.app-top-nav {
        margin-top: 56pt;
    }
}


/*header*/

.wm-app .modal-header {
    background-color: unset;
}


/*table new*/

.wm-app .con-table-new {
    padding: 8px;
    border-radius: 8px;
    background-color: #ffffff;
}

.wm-app .table-new thead tr th .header-data {
    height: 48px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
}

.wm-app .table-new th span {
    font-size: 12px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #3c3c3c;
}

.wm-app .table-new .table>tbody>tr>td .app-datagrid-row {
    height: 56px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #3c3c3c;
}

.wm-app .table-new thead th {
    top: 0;
    position: sticky;
    z-index: 20;
}

.wm-app .table-new .table>thead:first-child>tr:first-child>th {
    padding: 0;
}

.wm-app .table-new .col-status {
    z-index: 50;
    position: sticky !important;
    right: 120px;
    background: #ffffff;
    box-shadow: inset 1px 0px #ebebeb;
}

.wm-app .table-new .col-action {
    z-index: 50;
    position: sticky !important;
    right: 0px;
    background: #ffffff;
}

.app-grid .table tbody tr td .row-action-button.btn-transparent {
    color: #3c3c3c;
    opacity: 1 !important;
}


/*pagination table*/

.wm-app .table-new .app-datanavigator .pagination.basic li a,
.wm-app .table-new .app-datanavigator .pagination.basic li.disabled a {
    background-color: transparent;
}

.wm-app .table-new .pagination {
    margin: 0px !important;
}

.wm-app .table-new .app-datanavigator .pagination.basic li a {
    border-radius: 8px;
    width: 42px;
    height: 42px;
}

.wm-app .table-new .app-datanavigator .pagination.basic li.active a {
    background-color: rgba(240, 240, 240, 0.8);
    color: #3c3c3c;
    border: 0;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: center;
    border-radius: 8px;
}

.wm-app .table-new .app-datagrid-paginator nav {
    display: flex;
    justify-content: end;
    flex-direction: row-reverse;
}

.wm-app .table-new .table>thead>tr>th {
    border-bottom: none;
}

.wm-app .table-new .table>tbody>tr>td {
    border-top: none;
    align-items: center;
    padding: 16px 12px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: #3c3c3c;
}

.wm-app .table-new .app-grid .app-datagrid .sort-buttons-container {
    bottom: 17px !important;
}

.wm-app .table-new .table>thead:first-child>tr:first-child>th input {
    margin-top: 18px;
    margin-left: -7px;
    position: absolute;
}

.wm-app .table-new input[type="checkbox"] {
    margin: 1.5px 0 0;
}

.grecaptcha-badge {
    visibility: hidden;
}

@media print {
    body {
        display: none;
    }
}

.wm-app .app-fileupload .app-multi-file-upload .upload-extensions {
    display: none;
}

.app-fileupload .app-multi-file-upload .drop-box {
    margin: 0px;
    /* margin-bottom: 20px; */
}

.wm-app .app-livelist .app-label,
.wm-app p.app-label {
    margin-bottom: 0px;
}


.wm-app .table > thead > tr > th {
    vertical-align: middle !important;
}

.table > tbody > tr > td {
    vertical-align: middle !important;
}


/* toast */
.wm-app #toast-container {
    width: auto !important;
    max-width: 1000px !important;
    min-width: 350px !important;
}

.wm-app #toast-container .toast {
    width: auto !important;
    max-width: 1000px !important;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
    border: solid 1px #e6f7ee;
    background-color: #fff;
}

.wm-app #toast-container .toast.toast-success {
    border-left: 8px solid #2bbd71;
}

.wm-app .toast .toast-message {
    width: auto !important;
    max-width: 1000px !important;
    font-size: 14px;
    font-weight: normal;
    color: #4c4c4e;
}

.wm-app .toast .toast-title {
    font-size: 14px;
    font-weight: 500;
    color: #242425;
}

.wm-app #toast-container .toast-success {
    background-image: url('resources/images/icons/green_circle-check.svg') !important;
}

.wm-app #toast-container .toast-error,
.wm-app #toast-container .toast-danger {
    background-image: url('resources/images/icons/red_circle-xmark.svg') !important;
}

.wm-app #toast-container .toast-error,
.wm-app #toast-container .toast-danger {
    border-left: 8px solid #f04449;
}

.wm-app #toast-container .toast {
    background-position: 12px;
    background-repeat: no-repeat;
}

.wm-app .list-group {
    margin-bottom: 0 !important;
}

.wm-app .flex {
    display: flex;
}